<template>
	<view class="container">
		<view style="position: absolute; top: 0;  width: 100%; height: 620rpx;background: linear-gradient(#f18f00, #f5a93c, #fce8c9)">
			
		</view>
		<view class="" style="width: 100%;height: 200rpx;">
			
		</view>
		<view class="">
			<u-tabs :list="list1" @click="click"></u-tabs>
		</view>
		
		<view class="orderYs" v-for="(item,index) in ordersList" :key="index" @click="goOrderDetail(item)">
			<view class="" style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
				<view class="" style="font-size: 40rpx;font-weight: 900;">
					{{item.store.store_name}}
				</view>
				<view v-if="item.status == 0" class="" style="color: orange;">
					待支付
				</view>
				<view v-if="item.status == 1" class="" style="color: orange;">
					已支付
				</view>
				<view v-if="item.status == 2" class="" style="color: orange;">
					待配送
				</view>
				<view v-if="item.status == 3" class="" style="color: orange;">
					待评论
				</view>
				<view v-if="item.status == 5" class="" style="color: orange;">
					已完成
				</view>
			</view>
			<view class="">
				{{item.update_time}}
			</view>
			<view class="" style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
				<view class="" style="width: 80%;display: flex;overflow-x: scroll;">
					<view class="">
						<image style="width: 150rpx;height: 150rpx;border-radius: 50rpx;padding: 10rpx;" :src="item.goods[0].images" mode=""></image>
						<image style="width: 150rpx;height: 150rpx;border-radius: 50rpx;padding: 10rpx;" :src="item.goods[1].images" mode=""></image>
						<image style="width: 150rpx;height: 150rpx;border-radius: 50rpx;padding: 10rpx;" :src="item.goods[2].images" mode=""></image>
					</view>
					
					
				</view>
				<view class="" style="width: 15%;text-align: center;">
					￥{{item.pay_price}}
				</view>
				
			</view>
			
		</view>
		
		
		
		
		
		
		
		
		
		<view class="" style="width: 100%;height: 100rpx;">
			
		</view>
	</view>
</template>
<script>
	import login from "@/components/login.vue"
	import {
		mapActions,
		mapGetters
	} from 'vuex';
  	import carList from '@/components/car-list/car-list.vue'
  	export default {
  		components:{
  			carList,
			login
  		},
		computed: {
			...mapGetters(['userInfo'])
		},
  		data() {
  			return {
  				maskTitle:'',
  				carList:[
  					{	
  						shopId: 1,
  						title: "",
  						total: 2,
  						selected:true,
  						
  					}
  				],
				list1:[{
                    name: '全部',
                }, {
                    name: '待支付',
                }, {
                    name: '待配送',
                }, {
                    name: '待确认'
                }, {
                    name: '待评论'
                }, {
                    name: '已完成'
                }
				],
				lists:[],
				status:'',
				ordersList:[],
				tupian:'',
				userId:'',
  			}
  		},
  		onLoad() {
  			this.getFenList()
			this.getOrderList()
			
			this.userId = uni.getStorageSync('userId')
			if (this.userId == '') {
				uni.navigateTo({
					url: '/login-pkg/login/login'
				})
			}
			
  		},
		
  		methods: {
			click(item,index) {
				if (item.name === '全部') {
					this.status = ''
					this.getOrderList()
				}else if(item.name == '待支付'){
					this.status = 0
					this.getOrderList()
				}else if(item.name == '待配送'){
					this.status = 1
					this.getOrderList()
				}else if(item.name == '待确认'){
					this.status = 4
					this.getOrderList()
				}else if(item.name == '待评论'){
					this.status = 5
					this.getOrderList()
				}else if(item.name == '已完成'){
					this.status = 6
					this.getOrderList()
				}
			},
			// 获取分类列表
			getFenList(){
				this.$req('GET',this.$api.fenLlist,{}).then(res =>{
					console.log(res,'查看分类列表')
					this.lists = res.data.list.map(item => ({ name: item.title }));
				})
			},
			// 获取订单列表
			getOrderList(){
				this.$req('GET',this.$api.getorderList,{
					status:this.status,
					user_id:uni.getStorageSync('userId')
				}).then(res =>{
					
					this.ordersList = res.data.data
					
					
					
					console.log(this.tupian,'获取订单列表tupiantupian')
					
					
				})
			},
			goOrderDetail(item){
				uni.navigateTo({
					url: `/order-pkg/order/order?id=${item.id}&name=${item.store.store_name}`
				})
				// console.log(item,'打印item')
			}
				
		}
			
  	}
  </script>
  <style lang="scss">
  	page {
  		background: #f6f5f7;
  	}
  	    view,textarea,input,text,button{
  	      padding: 0;
  	      margin: 0;
  	      box-sizing:border-box;
  	      font-size: 28rpx;
  	      font-family: "微软雅黑";
  	    }
  	    .uni-checkbox-input{
  	        border-radius: 50% !important;
  	    }
  	    .container {
  	        height: 100%;
  	        display: flex;
  	        flex-direction: column;
  	        align-items: center;
  	        justify-content: space-between;
  	        box-sizing: border-box;
  	        background: #f5f5f5;
  	        overflow: hidden;
  	    }
  	    .line1{
  	        overflow: hidden;
  	        text-overflow: ellipsis;
  	        display: box;
  	        display: -webkit-box;
  	        line-clamp: 1;
  	        box-orient: vertical;
  	        -webkit-line-clamp: 1;
  	        -webkit-box-orient: vertical;
  	        word-break: break-all; /* 英文换行问题 */
  	    }
  	    .line2 {
  	        overflow: hidden;
  	        text-overflow: ellipsis;
  	        display: box;
  	        display: -webkit-box;
  	        line-clamp: 2;
  	        box-orient: vertical;
  	        -webkit-line-clamp: 2;
  	        -webkit-box-orient: vertical;
  	        word-break: break-all; /* 英文换行问题 */
  	    }
  	    .centerboth {
  	        display:flex;
  	        display: -webkit-flex;
  	        align-items:center;
  	        -webkit-align-items:center;
  	        justify-content: center;
  	        -webkit-justify-content: center;
  	    }
  	    .clearfix:after {
  	        content: "";
  	        display: block;
  	        visibility: hidden;
  	        height: 0;
  	        clear: both;
  	    }
  	
  	    .clearfix {
  	        zoom: 1;
  	    }
  	    image{
  	      padding: 0;
  	      margin: 0;
  	    }
  	    textarea {
  	      width:300rpx;
  	      height:75rpx;
  	      display:block;
  	      position:relative;
  	      font-size: 28rpx;
  	    }
  	    button::after{ border: none; }
  	    input:-ms-input-placeholder {
  	        color: #808080;
  	    }
  	    car-list{
  	        width: 100%;
  	    }
		
		.orderYs{
			width: 95%;
			background-color: #fff;
			z-index: 99;
			margin-top: 40rpx;
			border-radius: 10rpx;
			padding: 10rpx;
		}
		
		
  </style>